import React,{Component} from "react";
import { Form, Input, Icon, Pagination, message, BackTop } from 'antd';
import {Link, withRouter} from "react-router-dom";
import moment from "moment";
import ajax from "../ajaxMethod";
import Header from "../component/header.js";
import Footer from "../component/footer.js";

class Airport extends Component{
    constructor(props){
        super(props);
        this.state = {
            values:{
                type:1,
                page:1,
                total:0,
                pageSize:20,
                data:[],
            },
            searchContent:"",
        }
    }
    componentDidMount(){
        scrollTo(0,0);
        this.getData();
    }
    getData = (content, page) =>{
        let _this = this, 
            values = this.state.values,
            subcontent = content || values.searchContent, 
            subpage = page || values.page;

        ajax.getAjax("/interface/announcement",{page: subpage, pageSize: values.pageSize,type: values.type, searchContent: subcontent},
        res=>{
            if(res.success){
                console.log("获取到数据",res.data);
                _this.setState({values:{...values, total:res.data.total, data: res.data.data}});
            }else{
                console.error(res.description);
            }
        },err=>{
            console.error(err);
        })
    }
    getArticleDetail(id){
        if(id){
            window.open("http://localhost:3000/articleDetail"+"?id="+id);
        }
    }
    inputChange = (e) =>{
        this.setState({searchContent: e.target.value});
    }
    onPageChange = (page) =>{
        this.getData(this.state.values.searchContent, page);
        this.setState({values:{...this.state.values, page: page}});
    }
    submit = (e) =>{
        //提交数据，去除空格
        let searchContent = this.state.searchContent.replace(/\s+/g, "");
        if(searchContent){
            message.success("提交:"+ searchContent)
            this.getData(searchContent);
            this.setState({searchContent: searchContent});
        }else{
            //没有内容的时候获取所有的数据
            this.getData();
            this.setState({searchContent: ""});
        }
    }
    render(){
        let state = this.state;
        return(
        <div className="airport all-article">
            <Header></Header>
            <div className="head-contain">
                <div className="search-wrap">
                    <div className="search-input">
                        <Input onChange={this.inputChange} onKeyPress={this.submit} value={this.state.searchContent}/>
                    </div>
                    <div className="search-btn" onClick={this.submit}>
                        <Icon type="search" />
                        <span>搜 索</span>
                    </div>
                </div>
            </div>
            <div className="content-box">
                <div className="content">
                    <ul>
                        {
                            (()=>{
                                let data = state.values.data;
                                if(data.length){
                                    return data.map(value=>{
                                        if(value.top){//置顶的文章
                                            return <li class="article matrix">
                                                <a target="_blank" onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div  class="headline import">
                                                    <a target="_blank" title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>[置顶]{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }else{
                                            return <li class="article matrix">
                                                <a onClick={this.getArticleDetail.bind(this, value._id)}>
                                                    <div>
                                                        <img src={value.cover}></img>
                                                    </div>
                                                </a>
                                                <div class="headline">
                                                    <a title={value.title} onClick={this.getArticleDetail.bind(this, value._id)}>{value.title}</a> 
                                                    <div className="date">{moment(value.date).format("YYYY-MM-DD")}</div>
                                                </div>
                                            </li>
                                        }
                                    })
                                }else{
                                    return <p className="article-null">暂无数据</p>
                                }
                            })()
                        }
                    </ul>
                    <div className="pagination">
                        <Pagination showQuickJumper defaultCurrent={1} pageSize={state.values.pageSize} total={state.values.total} onChange={this.onPageChange}></Pagination>
                    </div>
                </div>
            </div>
            <BackTop />
            <Footer></Footer>
        </div>)
    }
}

export default withRouter(Airport);